<template>
    <div class="main">
        <div class="title">
            <el-breadcrumb separator="/">
            <el-breadcrumb-item>车行管理</el-breadcrumb-item>
            <el-breadcrumb-item><a href="/">区域管理</a></el-breadcrumb-item>
            <el-breadcrumb-item></el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="content">
            区域管理
        </div>
        <div class="search-box">
            <div class="search">
                <div class="search-btn">
                    <span>区域名称/编号</span>
                    <el-input v-model="input" placeholder="请输入内容"></el-input>
                </div>
            </div>
            <div class="searchs">
                <el-button type="primary" @click="search()">查询</el-button>
                <el-button @click="reset()">重置</el-button>
            </div>
        </div>
        <div class="footer">
            <div class="tops">
                <span>区域列表</span>
                <div class="rights">
                    <el-button type="primary" @click="jump()">+ 新建</el-button>
                    <el-button>批量操作</el-button>
                </div>
            </div>
            <div class="bottom">
                <el-table
                    ref="multipleTable"
                    :data="newlist.slice(0,10)"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                    <el-table-column
                        type="selection"
                        width="55" 
                        >
                    </el-table-column>
                    <el-table-column
                        :prop="value"
                        :label="key"
                        v-for="(key,value) in tableData" :key="key"
                        width="170">
                    </el-table-column>
                    <el-table-column
                    prop="type"
                    label="操作"
                    width="150">
                    <template slot-scope="scope">
                        <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
                </el-table>
            </div>
            <div class="page">
                <div class="block">
                    <el-pagination
                    :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper"
                    :page-sizes="[10]"
                    :total="page"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage4"
                    background>
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'

export default {
    data(){
        return {
            lists:[],
            page:1,
            newlist:[],
            currentPage1: 5,
            currentPage2: 5,
            currentPage3: 5,
            currentPage4: 1,
            tableData: {"regionname": "区域名称", "regioncode": "区域编号", "areasize": "面积", "parkingnum": "车位数量", "remarks": "备注" },
            multipleSelection: [],
            input: ''
        }
    },
    methods:{
        handleEdit(index, row) {
                console.log(index, row);
                this.$router.push({
                    path: '/index/newregion',
                    query: {
                        data:row
                    }
                })
            },
        handleDelete(index, row) {
            console.log(index, row);
            let id = row.id
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                type: 'success',
                message: '删除成功!'
                });
                this.lists.splice(index, 1);
                axios.get(`http://localhost:8085/user/delregion?id=${id}`).then(res=>{
                    this.$router.go(0)
                }).catch(error=>{
                    console.log(error);
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            })
        },
        handleSelectionChange(val) {
        this.multipleSelection = val;
        },
        handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage4=val
        },
        jump(){
            if(this.$route.name!='newregion'){
                this.$router.push({
                    path: '/index/newregion'
                })
            }else{
                console.log('已进入');
            }
        },
        getData(){
            axios.get("http://localhost:8085/user/region").then(res=>{
                console.log(res);
                this.page=res.data.length
                this.lists=res.data
                this.newlist=res.data
            }).catch(error=>{
                console.log(error);
            })
        },
        search(){
            this.newlist = this.lists.filter(item=>{  
                    const inputdata = this.input == '' || item.regioncode.includes(this.input)
                    return  inputdata
                })
            this.page = this.newlist.length
        },
        reset(){
            this.input = ''
            this.getData()
        }
    },
    
    mounted(){
        this.getData()
    },
    watch:{
        currentPage4:{
            handler(val) {
                axios.get("http://localhost:8085/user/region").then(res=>{
                    console.log(res);
                    this.newlist=res.data.splice((val-1)*10,10)
                }).catch(error=>{
                    console.log(error);
                })
            },
        }
    },
}
</script>

<style scoped lang="scss">
.main{
    margin: 0px;
    background-image: none;
    position: relative;
    left: -24px;
    width: 1136px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    
    .title{
        margin-top: 20px;
        padding: 16px 0 0 32px;
        background-color: #fff;
    }
    .content{
        font-weight: 700;
        background-color: #fff;
        font-size: 20px;
        color: rgba(0, 0, 0, 0.847058823529412);
        padding: 16px 0 16px 32px;
        border-bottom: 1px solid rgba(233, 233, 233, 1);;
    }
    .search-box{
        background-color: #fff;
        height: 80px;
        padding: 0 32px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .search{
            display: flex;
            
            width: 900px;
            align-items: center;
            span{
                display: inline-block;
                width: 90px !important;
                font-size: 14px;
                color: rgba(0, 0, 0, 0.847058823529412);
                margin-right: 15px;
            }
        }
        .searchs{
            width: 160px;
        }
    }
    .footer{
        margin-top: 15px;
        background-color: #fff;
        padding: 16px 32px;
        .tops{
            display: flex;
            justify-content: space-between;
            
        }
    }
}
.search-btn{
    margin-left: 15px !important;
    display: flex;
    width: 360px;
    align-items: center;
    justify-content: space-between;
}
.search-btn{
    ::v-deep .el-input{
    width: 250px !important;
}
}
.block{
    margin-top: 40px;
}
.el-select.el-select--mini{
    display: flex;
    justify-content: flex-end !important;
}
</style>